<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互设计</title>
    <style>
        .list .item{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dashed #4caf50;
            padding: 8px 0px;
        }
        .list .item .caption{
            font-weight: 900;
        }
        .list .item .operates .delete{
            border: 1px solid rgb(177,107,107);
            color: rgb(207,72,71);
            outline: none; /*可无*/
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="list">
        <div class="item">
            <div class="content caption">
                2020/7/17 杭州 心情有点抑郁
            </div>
            <div class="operates caption">
                操作起来
            </div>
        </div>

        <div class="item">
            <div class="content">
                ADF减肥法
            </div>
            <div class="operates">
                <button class="delete">删除</button>
            </div>
        </div>

        <div class="item">
            <div class="content">
                找小姐姐聊天把
            </div>
            <div class="operates">
                <button class="delete">删除</button>
            </div>
        </div>
    </div>

    <script>
        let listELe = document.querySelector('.list');
        let deleteEle = document.querySelectorAll('.delete');

        deleteEle.forEach(function (el) {
            /*给每个button添加事件响应会很消耗资源 可以通过事件委托优化*/
            el.addEventListener('click',function () {
                console.log("开始删除...")

                /*通过给予按钮状态改善用户多次点击删除键造成服务器压力*/
                el.setAttribute('disabled','disabled');
                el.style.borderColor = 'rgb(126,117,116)';
                el.style.color = 'rgb(227,174,174)';
                el.style.cursor = 'wait';
                el.innerHTML = '处理中';

                setTimeout(function () {
                    let itemEl = el.parentNode.parentNode;
                    listELe.removeChild(itemEl);
                    console.log('删除成功');
                },1500)
            })
        })
    </script>
</body>
</html>